<script setup>
import { onMounted, watch } from 'vue';
import { useThemeStore } from './store/theme';
import { useRoute } from 'vue-router';

// 主题管理
const themeStore = useThemeStore();
const route = useRoute();

// 监听路由变化，添加页面过渡动画
watch(
  () => route.path,
  () => {
    // 可以在这里添加页面切换逻辑
  }
);

// 初始化主题
onMounted(() => {
  themeStore.initTheme();
});
</script>

<template>
  <!-- <div id="app" :class="themeStore.currentTheme"> -->
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
  <!-- </div> -->
</template>

<style>
#app {
  width: 100%;
  height: 100vh;
  font-family:
    'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
</style>
